<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="运维管理—设备档案模板"></Header>

    <!-- 搜索栏 -->
    <section class="search_bar">
      <LButton label="＋新增" style="margin-left: 16px" @click="repairDialog = true"></LButton>
      <LButton label="查询数据" style="margin-left: 16px"></LButton>
    </section>
    <!-- 标签页 -->
    <el-table :data="tableData1" style="width: 100%" :default-sort="{ prop: 'c', order: 'ascending' }" border>
      <el-table-column prop="a" label="模板名称" />
      <el-table-column prop="b" label="设备类型" />
      <el-table-column prop="c" label="排序" width="250" sortable />
      <el-table-column label="操作" width="230">
        <template #default>
          <el-button type="primary" size="mini" @click="repairDialog1 = true">编辑</el-button>
          <el-button type="danger" size="mini" @click="del">删除</el-button>
          <el-button type="success" size="small" @click="repairDialog2 = true">设备类型</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框：新增 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog" title="新增" width="40%" @close="repairDialogClose">
        <el-form label-width="110px" :model="repairForm" ref="repairFormRef" :rules="repairFormRules">
          <el-form-item label="模板名称" prop="a">
            <el-input v-model="repairForm.a"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="b">
            <el-input v-model="repairForm.b"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 弹出框：编辑 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog1" title="编辑" width="40%" @close="repairDialog1Close">
        <el-form label-width="110px" :model="repairForm1" ref="repairForm1Ref" :rules="repairForm1Rules">
          <el-form-item label="模板名称" prop="a">
            <el-input v-model="repairForm.a"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="b">
            <el-input v-model="repairForm.b"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairDialog1SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog1 = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 弹出框：设备类型 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog2" title="绑定设备类型" width="60%" @close="repairDialog2Close()">
        <div class="row-1">
          <!-- 表格1 -->
          <div class="pop-2 dialog-border-padding">
            <div class="sub-title">设备类型列表</div>
            <el-table ref="subTableRef" :data="subTable" highlight-current-row @current-change="currentSelect" style="width: 620px" :default-sort="{ prop: 'a', order: 'ascending' }" border>
              <el-table-column prop="a" label="设备类型编码" width="150" />
              <el-table-column prop="b" label="设备类型" />
              <el-table-column prop="c" label="模板名称" />
            </el-table>
            <!-- 分页 -->
            <el-pagination small background layout="prev, pager, next" :total="12"></el-pagination>
          </div>
          <!-- 表格2 -->
          <div class="pop-2 dialog-border-padding">
            <div class="sub-title">已绑定的设备类型</div>
            <el-table :data="subTable1" style="width: 420px" :default-sort="{ prop: 'a', order: 'ascending' }" border>
              <el-table-column prop="a" label="设备类型编码" width="150" />
              <el-table-column prop="b" label="设备类型" />
              <el-table-column label="操作" width="80">
                <template #default>
                  <el-button type="danger" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination small background layout="prev, pager, next" :total="12"></el-pagination>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairDialog2SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog2CalcBtn()">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LButton from "../../../components/LButton.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LSelect from "@/components/LSelect.vue";
import LInput2 from "@/components/LInput2.vue";

export default {
  components: {
    Header,
    LInput,
    LButton,
    LDateTimeSelect2,
    LSelect,
    LInput2,
  },
  data() {
    return {
      close: false,
      option1: [
        { label: "全部", value: "1" },
        { label: "梁山县水泊商务中心", value: "2" },
      ],

      tableData1: [
        {
          a: "配电支路模板",
          b: "低压配电室",
          c: "0",
        },
      ],
      repairDialog: false,
      repairForm: {},
      repairDialog1: false,
      repairForm1: {},
      repairDialog2: false,
      repairForm2: {},

      subTable: [
        {
          a: "03",
          b: "冷却塔",
          c: "",
        },
        {
          a: "01",
          b: "冷水机组",
          c: "",
        },
        {
          a: "02",
          b: "循环水泵",
          c: "",
        },
      ],
      subTableSelect: null,

      subTable1: [
        {
          a: "17",
          b: "低压配电室",
          c: "",
        },
      ],
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    //清空“新增”弹窗内容
    repairDialogClose() {
      this.$refs.repairFormRef.resetFields();
    },
    //清空“编辑”弹窗内容
    repairDialog1Close() {
      this.$refs.repairForm1Ref.resetFields();
    },
    //删除按钮
    del() {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          // post("/airChannel/deleteAirChannel", { id: id }).then((res) => {
          //   // console.log(res);
          //   if (res.data.code == 200) {
          //     this.$message.success(res.data.data);
          //     this.getData();
          //   } else {
          //     this.$message.error(res.data.data);
          //   }
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //清空“设备类型"弹窗内容
    repairDialog2Close(row) {
      this.$refs.subTableRef.setCurrentRow(row); //取消表格单选
    },
    //当前“设备列表”选择查询的数据
    currentSelect(val) {
      console.log("当前选择", val);
      this.subTableSelect = val;
    },
    //搜索栏“搜索图标"弹框取消按钮
    repairDialog2CalcBtn(row) {
      this.$refs.subTableRef.setCurrentRow(row); //取消表格单选
      this.repairDialog2 = false;
    },
    //搜索栏“搜索图标"弹框确定按钮
    repairDialog2SureBtn() {
      this.repairDialog2 = false;
      // this.no = this.subTableSelect.a;
      // this.name = this.subTableSelect.b;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.row-1 {
  display: flex;
  justify-content: space-between;
  padding: 0 2vw 0 0;

  .sub-title {
    line-height: 30px;
  }
}

/deep/ .el-pagination {
  right: 0vh !important;
}
</style>